<template>
	<view class="content">
		<!-- 间隔 -->

		<view class="storeName">{{order.data.storeName}}</view>

		<!-- <uni-interval></uni-interval> -->

		<view class="order-goods unify-background-color">
			<uni-order-goods :isTakeOut="isIndex" :isOpenTakeOut="isOpenTakeOut" :carList="order.data.orderDetails"
				:total-price="order.data.amount"></uni-order-goods>
		</view>
		<!-- 间隔 -->
		<!-- <uni-interval></uni-interval> -->


		<view class="rate">
			<span style="display: block;float: left;">评分：</span><uni-rate :touchable="false" :value="3"
				@change="onChange" style="float: left;" />
		</view>
		<!-- <uni-interval></uni-interval> -->

		<view class="evaluate">
			<textarea placeholder-style="color:#cfcbce" placeholder="亲可以从菜品口" v-model="remark" class="remarks" />
		</view>
		<uni-section>
			<uni-file-picker  :value="fileLists" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="success" @fail="fail" />
		</uni-section>

		<!-- 底部按钮 -->
		<uni-base-unify-btn title="立即评价" @tap="toEval(order.data.id,order.data.amount)"></uni-base-unify-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				isIndex: 0,
				// affirmOrderMenu: this.$mConstDataConfig.affirmOrderMenu,
				// userOperationMenu: this.$mConstDataConfig.userOperationMenu,
				// isOpenTakeOut: this.$mSettingConfig.isOpenTakeOut, // 是否开启外卖
				// isOpenArrive: this.$mSettingConfig.isOpenArrive, // 是否开启到店
				order: null,
				address: {
					consignee: null,
					phone: null,
					detail: null
				},
				// 图片回显
				fileLists: [],
				// 上传图片的样式
				imageStyles: {
					width: 90,
					height: 90,
				},
				// uni.chooseImage值，从相册选择，拍摄
				sourceType: ['album', 'camera'],
			}
		},
		onLoad(options) {
			// console.log(options)
			// console.log(JSON.stringify(this.$parseURL(options)))
			this.order = this.$parseURL(options)
			const that = this
			that.address.consignee = that.order.data.consignee
			that.address.phone = that.order.data.phone
			that.address.detail = that.order.data.address
			console.log(that.address.detail)
		},
		methods: {
			toPay(id, amount) {
				uni.navigateTo({
					url: '/pages/orderSuccess/orderSuccess?id=' + id + '&amount=' + amount
				})
			},
			select(e) {
				console.log(e)
				const tempFilePaths = e.tempFilePaths
				console.log(tempFilePaths[0])
				uni.uploadFile({
					url: 'http://localhost:8001/user/fileoss',
					filePath: tempFilePaths[0],
					//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					name: 'file',
					// 请求头设置
					// 我们是需要token和用户id登录时存从uni-app数据存储中取
					header: {
						"token": uni.getStorageSync('token'),
						// "tenant-id": uni.getStorageSync('tenant-id')
					},
					// 成功函数
					success: (res) => {
						// uni.uploadFile默认在外面包了一层data
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						// 取到文档服务器的值
						// let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = res.data
						x.extname = 'txt'
						x.name = res.data
						this.fileLists.push(x)
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})







				this.$https({
					url: "/fileoss",
					method: "post",
					header: {
						'Content-Type': 'multipart/form-data',
					},
					data: {
						file: e
					},
					success: (res) => {
						console.log(res)
					}
				})
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}

		}

	}
</script>

<style lang="scss" scoped>
	.rate {
		padding-top: 10px;
		font-size: 20px;
		height: 40px;
		background-color: white;
		border-bottom: 4rpx solid rgba(0, 0, 0, 0.05);
		border-top: 4rpx solid rgba(0, 0, 0, 0.05);
	}

	.evaluate {
		background-color: white;
		padding: 20rpx;
		border-bottom: 4rpx solid rgba(0, 0, 0, 0.05);

	}

	.storeName {
		margin-top: 10rpx;
		height: 40px;
		background-color: white;
		font-size: 20px;
		font-weight: bold;
		border-bottom: 4rpx solid rgba(0, 0, 0, 0.05);
	}

	.remarks {

		background-color: white;
		margin-left: 20px;
		// border: 0.2px solid;
	}

	// 订单信息
	.order-info {

		.order-item:nth-child(1) {
			font-size: $uni-font-size-lg;
		}

		.order-item {
			height: 96rpx;
			align-items: center;
			justify-content: space-between;

			.order-item-name {
				width: 120rpx;
				justify-content: space-between;
			}
		}
	}

	.item-value {
		font-size: $uni-font-size-lg;
	}

	.item-value-active {
		opacity: .8;
	}
</style>